<template>
  <div class="app-container">

    <vxe-grid
      ref="xGrid"
      border
      resizable
      keep-source
      size="small"
      align="center"
      round
      highlight-hover-row
      :loading="loading"
      :columns="tableColumn"
      :data="tableData"
      :tree-config="{children: 'children', parentKey: 'parentId', key: 'id'}"
    >
      <template v-slot:operate="{ row }">
        <vxe-button v-has="perms.edit" type="text" circle @click="edit(row)"><svg-icon icon-class="bianji" /></vxe-button>
      </template>
    </vxe-grid>

    <vxe-modal v-model="dialogVisible" :title="dialogTitle" width="800" :loading="submitLoading" resize destroy-on-close>
      <template v-slot>

        <ele-form
          ref="eleForm"
          v-model="formData"
          :form-desc="formDesc"
          :request-fn="handleSubmit"
          :rules="rules"
          label-position="right"
          :is-dialog="true"
          @close="closeDialog()"
        />

      </template>
    </vxe-modal>
  </div>
</template>
<script>
import api from '@/api/menus'

export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      loading: false,
      dialogVisible: false,
      submitLoading: false,
      perms: {
        edit: 'menu:edit'
      },
      dialogTitle: '',
      name: '菜单',
      tableData: [],
      tableColumn: [
        { type: 'seq', width: 40 },
        { field: 'name', title: '菜单名', treeNode: true },
        { field: 'seq', title: '排序号' },
        { field: 'path', title: '路径' },
        { field: 'redirect', title: '转发路径' },
        { field: 'component', title: '组件' },
        { field: 'icon', title: '图标' },
        { field: 'visibleValue', title: '状态' },
        { title: '操作', width: 120, fixed: 'right', slots: { default: 'operate' }}
      ],
      formData: {
        name: '',
        seq: '',
        path: '',
        redirect: '',
        component: '',
        icon: '',
        visible: ''
      },
      formDesc: {
        name: {
          type: 'input',
          label: '菜单'
        },
        seq: {
          type: 'number',
          label: '序号'
        },
        path: {
          type: 'input',
          label: '路径'
        },
        redirect: {
          type: 'input',
          label: '转发路径'
        },
        component: {
          type: 'input',
          label: '组件'
        },
        icon: {
          type: 'input',
          label: '图标'
        },
        visible: {
          type: 'switch',
          label: '状态'
        }
      },
      rules: {
        name:
          [{ required: true, message: '菜单名不能为空' }],
        path:
          [{ required: true, message: '路径不能为空' }],
        component:
          [{ required: true, message: '组件不能为空' }]

      }
    }
  },
  mounted() {
  },
  created() {
    this.listData()
  },
  methods: {
    listData() {
      this.loading = true
      api.treeMenus().then(res => {
        this.tableData = res.data
        this.loading = false

        setTimeout(() => {
          this.$refs.xGrid.setAllTreeExpand(true)
        }, 500)
      })
    },
    edit(row) {
      this.eidt = true
      this.resetForm()
      this.dialogVisible = true
      this.dialogTitle = '编辑' + this.name
      api.data(row.id).then(res => {
        this.formData = res.data
      })
    },
    closeDialog() {
      this.dialogVisible = false
      this.formData = {}
    },
    resetForm() {
      this.formData = {}
      if (this.$refs.eleForm) {
        this.$refs.eleForm.resetForm()
      }
    },
    handleSubmit(data) {
      this.submitLoading = true
      api.saveOrUpdate(data).then(() => {
        this.listData()
        // 重置formData
        this.formData = {}
        this.dialogVisible = false
        this.submitLoading = false
      })
    }
  }
}
</script>
<style lang="sass" scoped>
</style>
